<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
    }

    #popup {
      height: 200px;
      width: 200px;
      margin-top: -200px;
      color: #fff;
      background: #253444b8;
    }

    #popup-closer {
      color: #fff;
    }
  </style>
  <title>一个最简单的例子</title>
  <link rel="stylesheet" href="../library/ol/ol.css">
  <link rel="stylesheet" href="../css/common.css">

  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

</head>

<body>
  <button id="start-animation">Start Animation</button>
  <div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer" onclick="()=>{$()}"> 关闭 </a>
    <div id="popup-content"></div>
  </div>
  <div id="map" class="map">
  </div>


  <script src="../library/ol/ol-debug.js"></script>
  <script src="./js/common.js"></script>
  <script type="text/javascript">
    var points = [
      [8052182.961340424, 4832145.152385555],
      [11672240.584467556, 4255979.826435385]
    ];
    // 获取弹出框
    var container = document.getElementById("popup");
    var content = document.getElementById("popup-content");
    var popupCloser = document.getElementById("popup-closer");
    var overlay = new ol.Overlay({
      //设置弹出框的容器
      element: container,
      //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
      autoPan: true
    });

    var vectorSource = new ol.source.Vector({});

    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: 'map',
      view: new ol.View({
        center: ol.proj.transform(
          [104, 30], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6
      })
    });

    // 在地图上添加一个标记
    var icon = new ol.Feature({
      geometry: new ol.geom.MultiPoint(points),
      name: 'my icon'
    });
    //创建图标样式
    var iconStyle = new ol.style.Style({
      image: new ol.style.Icon({
        opacity: 0.75,
        src: "imgs/location.png"
      }),
    });
    //创建矢量层
    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: iconStyle
    });
    vectorSource.addFeature(icon);

    //添加进map层
    map.addLayer(vectorLayer);

    map.on('click', function (e) {
      //在点击时获取像素区域
      var pixel = map.getEventPixel(e.originalEvent);
      map.forEachFeatureAtPixel(pixel, function (feature) {
        //coodinate存放了点击时的坐标信息
        var coodinate = e.coordinate;
        //设置弹出框内容，可以HTML自定义
        content.innerHTML = "<span style='word-wrap:break-word'>你点击的坐标为：" + coodinate +
          "</span style='word-wrap:break-word'>";
        //设置overlay的显示位置
        overlay.setPosition(coodinate);
        //显示overlay
        map.addOverlay(overlay);
      });
    });
    /**
     * Add a click handler to hide the popup.
     * @return {boolean} Don't follow the href.
     */
     popupCloser.onclick = function () {
      overlay.setPosition(undefined);
      popupCloser.blur();
      return false;
    };

  </script>
</body>